/**
 * 传阅弹出框
 */
import { Button, Input, Form, Modal, Select} from "antd";
import { forwardRef, useImperativeHandle, useState , useRef, useLayoutEffect, useEffect} from "react";
import request from "../../framework/common/utils/request";
import { useForm } from "../../framework/common/context/metadata-context";
import { message } from "antd";
import SelectAuditors from "../../RuntimeForm/SelectAuditors/SelectAuditors.js";
import {globalModule} from "../../approval/index.js"
const { TextArea } = Input;

export default  forwardRef(function ({}, ref) {
  const { data: tplData,urlPrefix } = useForm().root;
  const [isVisible, setIsVisible] = useState(false);
  function showModal(){
    setIsVisible(true);
  }
  useImperativeHandle(ref, ()=>{
    return {
      showModal
    }
  })
  return (
    <>
      {
        isVisible
        && <ModalContent urlPrefix={urlPrefix} tplData={tplData} isVisible={isVisible} setIsVisible={setIsVisible}></ModalContent>
      }
    </>
  );
})

const ModalContent = function ({  isVisible, setIsVisible, tplData, urlPrefix }) {
  const [form] = Form.useForm();
  const [btnLoading, setBtnLoading] = useState(false)

  useEffect(()=>{
    request({
      url: "/systemsettings/message-mgr/get-message-subject-info", //设置默认传阅意见
      method: "GET",
      data: { 
        prc_name: tplData.ProcessInfo.Title,
        proc_id: tplData.ProcessInfo.ProcessGuid, 
        node_id: tplData.NodeInfo.node_id, 
        code: 'Circulate', 
        type: 'other' 
      },
      noTip: true//请求错误时，axios不展示公共错误
    }).then(function (result) {
      if (result.code == 1) {
        form.setFieldsValue({
          circulateExplain: result.data
        });//设置默认传阅意见
      } else {
        message.error(result.message);
      }
    }).catch(function () {
        
    });
  }, [])

  function handleOk() {
    setBtnLoading(true);

    form.validateFields()
  .then(values => {
    let formData = form.getFieldsValue();
    var sendData = {
        opinion: formData.circulateExplain,//传阅说明
        cc_list: formData.person, //接收人
        proc_id: tplData.ProcessInfo.ProcessGuid,
        step_id: tplData.StepInfo.step_id,
        node_id: tplData.NodeInfo.node_id,
        initiater: {
            initiater_id: tplData.CurUserGUID,
            initiater_name: tplData.CurUserName
        }
    }
    setBtnLoading(true);
    request({
        url: "/flowinstance/approval/circulate?prc_name=" + tplData.ProcessInfo.Title,
        method: 'POST',
        data: sendData,
        noTip: true//请求错误时，axios不展示公共错误
    }).then(function(result) {
      setBtnLoading(false);
      if (result.code == 1) {
          message.success("传阅成功" /*传阅成功*/ );
          setIsVisible(false);
          globalModule.refreshParentWindow({
            tplData: tplData,
            approveType: "Circulate"
          });//传阅后回调刷新业务系统的方法
      } else {
          message.error(result.message);
      }
    }).catch(function(){
      setBtnLoading(false);
      message.error("传阅失败");
    });
  })
  .catch(errorInfo => {
    setBtnLoading(false);
        return
  });

  }

  const handleCancel = () => {
    setIsVisible(false);
  };

  // const { getFieldDecorator } = form;

  //表单对齐方式
  const formLayout = "horizontal"
  const formItemLayout = {
    labelCol: { span: 4 },
    wrapperCol: { span: 19 },
  }


  function getList(){
    return <></>
  }

  return (
    <Modal centered={true} title="流程传阅" width={600} visible={isVisible} onOk={handleOk} onCancel={handleCancel}
      footer={[
        <Button key="back" onClick={handleCancel}>
          取消
        </Button>,
        <Button key="submit" type="primary" loading={btnLoading} onClick={handleOk}>
          确定
        </Button>,
      ]}
    >
      <Form 
          form={form}
          labelAlign={"left"}
          colon={false}
          layout={formLayout}
      >
        <Form.Item name="person" rules={[
              {
                required: true,
                message: '请选择接收人员',
              },
            ]}  initialValue={[]} label="接收人员" {...formItemLayout}>
        
            <SelectAuditors
              CurUserGUID={tplData.CurUserGUID} 
              package_id={tplData.package_id}
              CurUserDepartmentGUID={tplData.CurUserDepartmentGUID} 
              urlPrefix={urlPrefix} 
              maxSize={tplData?.CirculateAuditorNumber || 30}
              title={"接收人员"}
            ></SelectAuditors>
          
        </Form.Item>
        <Form.Item label="传阅说明" name="circulateExplain" initialValue="" rules={[
              {
                required: true,
                message: '请录入传阅说明',
              },
            ]} {...formItemLayout}>
            
            <TextArea showCount={true} rows="8" maxLength={1000} placeholder="请输入传阅说明"></TextArea>
    
        </Form.Item>
      </Form>
    </Modal>
  );
};